<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1.常考题1</title>
</head>
<body>
  <!-- 1.v-show和v-if的区别 -->
  1.v-show通过css display: none 控制显示与隐藏
  2.v-if正真的渲染和销毁组件，而不是显示和隐藏
  3.频繁切换使用v-show 否则使用v-if 

  <!-- 2.v-for为什么一定要设置key -->
  1.必须使用key，且不能是index和random
  2.diff算法通过tag和key判断，是否是sameNode
  3.减少渲染次数，提升渲染性能

  <!-- 3.描述Vue组件生命周期（包括父子组件） -->
  beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroy 

  <!-- 4.vue组件通信 -->
  1.父子组件： props this.$emit('event')
  2.自定义事件： event.$on() event.$emit() event.$off()
  3.vuex

  <!-- 5.描述组件渲染和更新的过程 -->
  参考官网图

  <!-- 6.双向数据绑定v-model的原理 -->
  input 元素的value = this.name 
  绑定input事件this.name = $event.target.value 
  data 更新触发re-render 

  <!-- 7.对MVVM的理解 -->
  view --- view-model --- model 

  <!-- 8.computed特点 -->
  有缓存 data不变不会重新计算
  提高性能

  <!-- 9.为何组件data必须是一个函数 -->
  防止不同组件之间数据混乱
  vue实例本质上是一个class 使用一个data函数就能将组件数据放在函数闭包当中，自己使用

  <!-- 10.ajax应该放在那个那个生命周期当中 -->
  mounted 等数据和DOM全部加载完成后再去请求ajax

  <!-- 11.如何将组件所有props传递给子组件(了解) -->
  $props 
  < User v-bind='$props'> 

  <!-- 12.多个组件有相同的逻辑如何抽离 -->
  mixin 有缺点
  
  <!-- 13.什么时候使用异步组件 -->
  1.加载大组件
  2.路由异步加载

  <!-- 14.合适使用keep-live -->
  缓存组件，不需要重复渲染，如多个静态tab页面切换，可以优化性能

  <!-- 15.何时使用beforeDestroy -->
  解绑自定义时间 event.$off()；清除定时器；解绑自定义DOM事件，如window.scroll等

  <!-- 16.什么是作用域插槽 -->
  子组件slot通过 :dataname='dataname' 传递出来 父组件template通过 v-slot 拿到这个数据做处理
  例如el-table中el-col渲染男女性别

  <!-- 17.vuex中action和mutation不同 -->
  1.action中处理异步，mutation不可以
  2.mutation做原子操作
  3.action可以整合多个mutation

  <!-- 18.vue-router常用的路由模式 -->
  1.hash默认 window.onhashchange 
  2.H5 history（需要服务端的支持 子路由需要添加上跟路由） 

  <!-- 19.如何配置vue-router异步加载 -->
  component: () => import('.../')

  <!-- 20.请用vnode描述一个DOM结构 -->
  const node = {
    tag: '',
    props: {
      className: '',
      id: ''
    },
    children: [
      {},
    ]
  }

  <!-- 21.监听data变化的核心API -->
  Object.defineProperty() getter 和setter方法
  深度监听；监听数组
  缺点: 1.深度监听需要一次性递归 2.无法监听新增和删除属性 3.无法原生监听数组，需要特殊处理
  

  <!-- 22.Vue如何监听数组变换 -->
  Object.defineProperty不能监听数组的变化
  所以需要重新定义数组原型，重写push，pop等方法，实现监听
  Proxy可以原生支持监听数组方法

  <!-- 23.请描述响应式原理 -->
  1.监听data变换
  2.组件渲染和更新的流程

  <!-- 24.diff算法的时间复杂度 -->
  O(n)
  在O(n^3)基础上做了一些调整 

  <!-- 25.简述diff算法过程 -->
  1.patch(elem, vnode)和patch(vnode, newVnode)
  2.patchVnode和addVnodes和removeVnodes
  3.updateChildren(key的重要性)

  <!-- 26.Vue为何是异步渲染，$nextTick何用 -->
  异步渲染(以及合并data修改)，以提高渲染性能
  $nextTick在DOM更新完之后，触发回调

  <!-- 27.Vue常见性能的优化 -->
  1.合理使用v-show和v-if 
  2.合理使用computed
  3.v-for时加key，以及避免和v-if同时使用
  4.自定义事件，DOM事件及时销毁
  5.合理使用异步组件
  6.合理使用keep-live 
  7.data层级不要太深
  8.使用vue-loader在开发环境做模板编译
  9.webpack层面的优化
  10.前端通用的性能优化，如图片懒加载
  11.使用SSR














  
</body>
</html>